<template>
    <CustomDialogVue :data="data.dialog" @close="onCloseDialog">
        <template #content>
            <div class="custom-header">
                <section
                    @click="data.onExport"
                    v-permission="['finance:topUp:detailed-export']"
                    :class="['button', 'border', data.pageData.table.data.length ? '' : 'disabled']"
                >
                    导出
                </section>
            </div>
            <TemplateVue
                :page="data.pageData"
                @search="data.onSearch"
                @reset="data.onReset"
                @paginationChange="data.onPaginationChange"
                @paginationSize="data.onPaginationSize"
                @operation="data.onOperation"
            >
            </TemplateVue>
        </template>
    </CustomDialogVue>
</template>
<script setup lang="ts">
import { reactive, watch } from 'vue'
import TemplateVue from '@/components/template/Index.vue'
import CustomDialogVue from '@/components/baseDialog/Index.vue'
import TopUpDetailedData from '.'
/**
 * 接受父组件传递的参数
 */
const prop = defineProps(['data'])

/**
 * 注册父组件回调方法
 */
const emits = defineEmits(['visible'])

/**
 * 初始化数据
 */
const data = reactive(new TopUpDetailedData())

/**
 * 监听传递参数变化
 */

watch([prop.data], (newValue, oldValue) => {
    console.log(newValue[0], oldValue)
    data.dialog.visible = prop.data.visible
    if (newValue[0].visible) {
        data.dialog.title = prop.data.title
        data.dialog.companyId = prop.data.companyId
        console.log(prop)
        data.getData()
    }
})

/**
 * 监听关闭弹窗
 */
const onCloseDialog = () => {
    console.log('close')
    data.dialog.visible = false
    data.resetPagination()
    emits('visible')
}

const setData = () => {
    console.log('setdata')
}

defineExpose({ setData })
</script>
<style scoped lang="scss">
.my-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h4 {
        position: relative;
        padding-left: 8px;
        color: var(--color-black);

        &::before {
            content: '';
            width: 2px;
            height: 16px;
            background-color: var(--color-black);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
        }
    }
}

.custom-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
